import { TextBox } from "../types";
import { Group, Text, Path, Box } from "leafer-ui";

export const createIndexLabel = (params: {
  textBox: TextBox;
  index: number;
}) => {
  const { textBox, index } = params;
  const box = new Group({
    x: textBox.x - textBox.width / 2,
    y: textBox.y - textBox.height / 2,
  });
  const indexLabel = new Path({
    path: "M10 0C15.5228 0 20 4.47715 20 10C20 13.2815 18.4189 16.1932 15.9775 18.0166C15.6811 18.2424 12.5009 20.7012 11.0645 23.333C10.8492 23.7274 10.4493 24 10 24C9.55071 24 9.15078 23.7274 8.93555 23.333C7.49813 20.6993 4.31409 18.2394 4.02148 18.0166C1.58044 16.1932 0 13.2812 0 10C0 4.47715 4.47715 0 10 0Z",
    fill: "white",
    stroke: "#26A555",
    strokeWidth: 1.8,
    x: 0,
    y: 0,
    scale: 1,
    hoverStyle: {
      fill: "#26A555",
      stroke: "#fff",
      shadow: {
        x: 0,
        y: 1,
        blur: 4,
        color: "rgba(38, 165, 85, 0.80)",
      },
    },
  });
  box.add(indexLabel);
  const pathBounds = indexLabel.getBounds();
  box.add(
    new Text({
      text: index + "",
      fill: "#26A555",
      textAlign: "center",
      verticalAlign: "middle",
      fontSize: 14,
      fontWeight: 600,
      x: pathBounds.width / 2,
      y: pathBounds.height / 2,
      hoverStyle: {
        fill: "#fff",
      },
    })
  );
  return box;
};
